<template>
  <div>
    标签:
    <el-tag v-for="tag in note.noteTags" :key="tag" closable @close="handleClose(tag)"
      style="margin-right:5px;margin-bottom:5px;">
      {{ tag }}
    </el-tag>

    <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" size="small" @keyup.enter="handleInputConfirm"
      @blur="handleInputConfirm" style="width:90px;margin-right:5px;margin-bottom:5px" maxlength="20" />
    <el-button v-else size="small" @click="showInput" style="width:90px;margin-right:5px;margin-bottom:5px">+ New Tag
    </el-button>


    <!-- 待添加的候选tag -->
    <div v-if="setting.noteSetting.noteTags">
      <el-tag v-for="tag in setting.noteSetting.noteTags" :key="tag" @click="addTag(tag)" type="info"
        style="margin-right:5px;margin-bottom:5px;cursor: pointer;">{{ tag }}
      </el-tag>
    </div>

  </div>
</template>

<script>
import { nextTick } from 'vue'
import { useSetting } from '@/stores/setting'

export default {
  setup(props) {
    const inputValue = ref('')
    const inputVisible = ref(false)
    const InputRef = ref(null)

    // 点击删除按钮
    const handleClose = (tag) => {
      props.note.noteTags.splice(props.note.noteTags.indexOf(tag), 1)
    }

    // 单击添加标签
    const showInput = () => {
      inputVisible.value = true
      nextTick(() => { InputRef.value.input.focus() })
    }

    // 输入框回车或者失去焦点
    const handleInputConfirm = () => {
      if (inputValue.value) {
        props.note.noteTags.push(inputValue.value)
      }
      inputVisible.value = false
      inputValue.value = ''
    }


    // 待选标签
    const setting = useSetting()
    const addTag = (tag) => {
      if (tag) { props.note.noteTags.push(tag) }
    }


    return {
      inputValue, inputVisible, InputRef,
      handleClose, showInput, handleInputConfirm,
      setting, addTag
    };
  },
  props: ['note']
};
</script>

<style scoped></style>